﻿@model Guid
@section Styles{
<style type="text/css">
    html,
    body {
        background: #ffffff;
    }
</style>
}
@section Scripts{
<input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
<input type="hidden" value='@(Model)' id="hidden_id" />
<input type="hidden" value='@ViewData["PId"]' id="hidden_pId" />
<script type="text/javascript">
    var power = JSON.parse(document.getElementById('hidden_power').value);
    var id = document.getElementById('hidden_id').value;
    var pId = document.getElementById('hidden_pId').value;
    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                power: power,
                prefix: "/Admin/Menus",
                form: {
                    saveState: false,
                    pId: pId,
                    vm: {
                        Id: id,
                        Model: {},
                        AllFunctionList: [],
                        FunctionIds: []
                    }
                }
            }
        },
        created: function () {
            this.loadForm();
        },
        mounted: function () {

        },
        methods: {
            loadForm: function () {
                var _this = this;
                var path = _this.prefix + "/LoadForm/" + this.form.vm.Id;

                hzyAdmin.post(path, {}, function (r) {
                    if (r.status != 1) return;
                    _this.form.vm = r.data;
                    //给pid赋值
                    _this.form.vm.Model.Menu_ParentID = _this.form.pId;
                });
            },
            closeWindow: function (delay = 0) {
                setTimeout(function () {
                    hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                }, delay);
            },
            save: function () {
                var _this = this;
                var path = _this.prefix + "/Save";

                //验证
                if (!this.form.vm.Model.Menu_Name) return hzyAdmin.alert('菜单名不能为空!', '警告');

                this.form.saveState = true;
                hzyAdmin.post(path, this.form.vm, function (r) {
                    _this.form.saveState = false;
                    if (r.status == 1) {
                        hzyAdmin.alert('保存成功', '成功');
                        //关闭当前窗口
                        _this.closeWindow();
                    }
                });
            }
        }
    });
</script>
}
<div class="m-20 hzyAdminForm" id="app">
    <div class="container-fluid">
        <div class="row" v-show="form.vm.Id" style="display:none;">
            <div class="col-sm-12 bg-red-500 text-white p-20">
                <span>方便开发时 需要的 菜单ID&nbsp; : &nbsp;</span>{{form.vm.Id}}
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <h4 class="example-title">编号</h4>
                <input type="text" class="form-control" placeholder="请输入 编号" v-model="form.vm.Model.Menu_Num"
                    autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">菜单名称</h4>
                <input type="text" class="form-control" placeholder="请输入 菜单名称" v-model="form.vm.Model.Menu_Name"
                    autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">菜单地址</h4>
                <input type="text" class="form-control" placeholder="请输入 菜单地址" v-model="form.vm.Model.Menu_Url"
                    autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">图标</h4>
                <input type="text" class="form-control" placeholder="请输入 图标" v-model="form.vm.Model.Menu_Icon"
                    autocomplete="off" />
            </div>
            <div class="col-sm-6">
                <h4 class="example-title">是否显示</h4>
                <el-radio v-model="form.vm.Model.Menu_IsShow" :label="1">是</el-radio>
                <el-radio v-model="form.vm.Model.Menu_IsShow" :label="0">否</el-radio>
            </div>
            <div class='col-sm-12'>
                <h4 class="example-title">拥有功能</h4>

                <el-checkbox-group v-model="form.vm.FunctionIds">
                    <el-checkbox v-for="(item,index) in form.vm.AllFunctionList" :key="index" :label="item.Function_ID">
                        {{item.Function_Name}}</el-checkbox>
                </el-checkbox-group>

            </div>
        </div>
        <div class="hzyAdminForm-footer">
            <div class="row">
                <div class="col-sm-6"></div>
                <div class="col-sm-6 text-right">
                    <button class="btn btn-primary" @@click="save" v-bind:disabled="form.saveState"
                        v-if="power.Save">保存</button>
                    <button class="btn btn-danger" @@click="closeWindow()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>